<template>
<div>
    <div class="common-form">
      <span>{{curItem.name}}</span>
    </div>
    <el-form size="small" :model="curItem" label-width="100px">
      <div class="f16 gray3 form-subtitle">{{$t('page.product_data')}}</div>
      <!--商品数量-->
      <div class="form-item">
        <div class="form-label">{{$t('page.product_count_label')}}</div>
        <el-slider
          v-model="curItem.params.showNum"
          size="small"
          show-input
          :show-input-controls="false"
          input-size="small"
        ></el-slider>
      </div>
      <div class="form-chink"></div>
      <div class="f16 gray3 form-subtitle">{{$t('page.header_style')}}</div>
      <el-form-item :label="$t('page.title_type_label')">
        <el-radio-group v-model="curItem.style.titleType">
          <el-radio-button :label="1">{{$t('page.text_only')}}</el-radio-button>
          <el-radio-button :label="2">{{$t('page.image_only')}}</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <!--图片-->
      <el-form-item :label="$t('page.title_image_label')" v-if="curItem.style.titleType == 2">
        <div class="diy-special-cover">
          <img
            style="width: 220px"
            v-img-url="curItem.style.titleImage"
            alt=""
            @click="$parent.onEditorSelectImage(curItem.style, 'titleImage')"
          />
          <!-- <div class="gray9 f12">建议图片高度88px</div> -->
        </div>
      </el-form-item>
      <el-form-item :label="$t('page.title_zh')+'：'" v-if="curItem.style.titleType == 1"><el-input v-model="curItem.params.title" class="w-auto"></el-input></el-form-item>
      <el-form-item :label="$t('page.title_hk')+'：'" v-if="curItem.style.titleType == 1"><el-input v-model="curItem.params.titleHk" class="w-auto"></el-input></el-form-item>
      <el-form-item :label="$t('page.title_en')+'：'" v-if="curItem.style.titleType == 1"><el-input v-model="curItem.params.titleEn" class="w-auto"></el-input></el-form-item>
      <!--文字大小-->
      <div class="form-item" v-if="curItem.style.titleType == 1">
        <div class="form-label">{{$t('page.title_font_size_label')}}</div>
        <el-slider
          v-model="curItem.style.titleSize"
          :min="12"
          :max="24"
          size="small"
          show-input
          :show-input-controls="false"
          input-size="small"
        ></el-slider>
      </div>
      <div class="form-item" v-if="curItem.style.titleType == 1">
        <div class="form-label">{{$t('page.title_color_label')}}</div>
        <div class="flex-1 d-s-c" style="height: 36px">
          <el-color-picker
            size="default"
            v-model="curItem.style.titleColor"
          ></el-color-picker>
          <el-input class="ml10" v-model="curItem.style.titleColor" />
          <el-button
            style="margin-left: 10px"
            @click.stop="$parent.onEditorResetColor(curItem.style, 'titleColor', '#DDDDDD')"


            type="primary"
            link
            >{{$t('page.reset')}}</el-button
          >
        </div>
      </div>
      <el-form-item :label="$t('page.right_text_zh')+'：'"><el-input v-model="curItem.params.more" class="w-auto"></el-input></el-form-item>
      <el-form-item :label="$t('page.right_text_hk')+'：'"><el-input v-model="curItem.params.moreHk" class="w-auto"></el-input></el-form-item>
      <el-form-item :label="$t('page.right_text_en')+'：'"><el-input v-model="curItem.params.moreEn" class="w-auto"></el-input></el-form-item>
      <div class="form-chink"></div>
      <div class="f16 gray3 form-subtitle">{{$t('page.right_text_style')}}</div>
      <!--文字大小-->
      <div class="form-item">
        <div class="form-label">{{$t('page.text_size_label')}}</div>
        <el-slider
          v-model="curItem.style.moreSize"
          :min="12"
          :max="40"
          size="small"
          show-input
          :show-input-controls="false"
          input-size="small"
        ></el-slider>
      </div>
      <div class="form-item">
        <div class="form-label">{{$t('page.text_color_label')}}</div>
        <div class="flex-1 d-s-c" style="height: 36px">
          <el-color-picker
            size="default"
            v-model="curItem.style.moreColor"
          ></el-color-picker>
          <el-input class="ml10" v-model="curItem.style.moreColor" />
          <el-button
            style="margin-left: 10px"
            @click.stop="$parent.onEditorResetColor(curItem.style, 'moreColor', '#DDDDDD')"


            type="primary"
            link
            >{{$t('page.reset')}}</el-button
          >
        </div>
      </div>
      <div class="form-chink"></div>
      <div class="f16 gray3 form-subtitle">{{$t('page.content_display')}}</div>
      <!--商品名称-->
      <el-form-item :label="$t('page.product_name_label')">
        <el-radio-group v-model="curItem.style.productName">
          <el-radio-button :label="1">{{$t('page.show')}}</el-radio-button>
          <el-radio-button :label="2">{{$t('page.do_not_display')}}</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <!--销售价-->
      <el-form-item :label="$t('page.sale_price_label')">
        <el-radio-group v-model="curItem.style.productPrice">
          <el-radio-button :label="1">{{$t('page.show')}}</el-radio-button>
          <el-radio-button :label="2">{{$t('page.do_not_display')}}</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <!--划线价-->
      <el-form-item :label="$t('page.line_price_label')">
        <el-radio-group v-model="curItem.style.productLineprice">
          <el-radio-button :label="1">{{$t('page.show')}}</el-radio-button>
          <el-radio-button :label="2">{{$t('page.do_not_display')}}</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <!--划线价-->
      <el-form-item :label="$t('page.sales_volume_label')">
        <el-radio-group v-model="curItem.style.productSales">
          <el-radio-button :label="1">{{$t('page.show')}}</el-radio-button>
          <el-radio-button :label="2">{{$t('page.do_not_display')}}</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <div class="form-chink"></div>
      <div class="f16 gray3 form-subtitle">{{$t('page.header_style_section')}}</div>
      <!-- 	<div class="form-item">
				<div class="form-label">背景颜色：</div>
				<div class="flex-1 d-s-c" style="height: 36px;">
					<el-input class="ml10" v-model="curItem.style.title_color1" placeholder="透明" />
					<el-input class="ml10" v-model="curItem.style.title_color2" placeholder="透明" />
					<view class="ml10"><el-color-picker style="margin-left: 10px;" size="default" v-model="curItem.style.title_color1"></el-color-picker></view>
					<view class="ml10"><el-color-picker style="margin-left: 10px;" size="default" v-model="curItem.style.title_color2"></el-color-picker></view>
					<el-button style="margin-left: 10px;" @click.stop="ResetColor('title_color1', 'title_color2')" type="primary" link>重置</el-button>
				</div>
			</div> -->
      <!--图片-->
      <el-form-item :label="$t('page.background_image_label')">
        <div class="diy-special-cover">
          <img
            style="width: 220px"
            v-img-url="curItem.style.bgimage"
            alt=""
            @click="$parent.onEditorSelectImage(curItem.style, 'bgimage')"
          />
          <el-button
            style="margin-left: 10px"
            @click.stop="$parent.onEditorResetColor(curItem.style, 'bgimage', '')"


            type="primary"
            link
            >{{$t('page.reset')}}</el-button
          >
          <div class="gray9 f12"> {{$t('page.header_image_tip')}} 

</div>
        </div>
      </el-form-item>
      <!--组件样式-->
      <div class="form-chink"></div>
      <div class="f16 gray3 form-subtitle">{{$t('page.product_style')}}</div>
      <!--图片圆角-->
      <div class="form-item">
        <div class="form-label">{{$t('page.image_radius_label')}}</div>
        <el-slider
          v-model="curItem.style.productImgRadio"
          size="small"
          show-input
          :show-input-controls="false"
          input-size="small"
        ></el-slider>
      </div>
      <div class="form-item">
        <div class="form-label">{{$t('page.product_bg_label')}}</div>
        <div class="flex-1 d-s-c" style="height: 36px">
          <el-color-picker
            size="default"
            v-model="curItem.style.productBgColor"
          ></el-color-picker>
          <el-input
            class="ml10"
            v-model="curItem.style.productBgColor"
            :placeholder="$t('page.transparent')"
          />
          <el-button
            style="margin-left: 10px"
            @click.stop="$parent.onEditorResetColor(curItem.style, 'productBgColor', '')"


            type="primary"
            link
            >{{$t('page.reset')}}</el-button
          >
        </div>
      </div>
      <!--商品上圆角-->
      <div class="form-item">
        <div class="form-label">{{$t('page.border_radius_top_label')}}</div>
        <el-slider
          v-model="curItem.style.productTopRadio"
          size="small"
          show-input
          :show-input-controls="false"
          input-size="small"
        ></el-slider>
      </div>
      <!--商品下圆角-->
      <div class="form-item">
        <div class="form-label">{{$t('page.border_radius_bottom_label')}}</div>
        <el-slider
          v-model="curItem.style.productBottomRadio"
          size="small"
          show-input
          :show-input-controls="false"
          input-size="small"
        ></el-slider>
      </div>
      <div class="form-item" v-if="curItem.style.productName">
        <div class="form-label">{{$t('page.product_name_label')}}</div>
        <div class="flex-1 d-s-c" style="height: 36px">
          <el-color-picker
            size="default"
            v-model="curItem.style.productNameColor"
          ></el-color-picker>
          <el-input
            class="ml10"
            v-model="curItem.style.productNameColor"
            :placeholder="$t('page.transparent')"
          />
          <el-button
            style="margin-left: 10px"
            @click.stop="$parent.onEditorResetColor(curItem.style, 'productNameColor', '#333333')"






            type="primary"
            link
          > {{$t('page.reset')}} 

</el-button>
        </div>
      </div>
      <div class="form-item" v-if="curItem.style.productPrice">
        <div class="form-label">{{$t('page.sale_price_label')}}</div>
        <div class="flex-1 d-s-c" style="height: 36px">
          <el-color-picker
            size="default"
            v-model="curItem.style.productPriceColor"
          ></el-color-picker>
          <el-input
            class="ml10"
            v-model="curItem.style.productPriceColor"
            :placeholder="$t('page.transparent')"
          />
          <el-button
            style="margin-left: 10px"
            @click.stop="$parent.onEditorResetColor(curItem.style, 'productPriceColor', '#FF4C01')"






            type="primary"
            link
          > {{$t('page.reset')}} 

</el-button>
        </div>
      </div>
      <div class="form-item" v-if="curItem.style.productLineprice">
        <div class="form-label">{{$t('page.line_price_label')}}</div>
        <div class="flex-1 d-s-c" style="height: 36px">
          <el-color-picker
            size="default"
            v-model="curItem.style.productLineColor"
          ></el-color-picker>
          <el-input
            class="ml10"
            v-model="curItem.style.productLineColor"
            :placeholder="$t('page.transparent')"
          />
          <el-button
            style="margin-left: 10px"
            @click.stop="$parent.onEditorResetColor(curItem.style, 'productLineColor', '#999999')"






            type="primary"
            link
          > {{$t('page.reset')}} 

</el-button>
        </div>
      </div>
      <div class="form-item" v-if="curItem.style.productSales">
        <div class="form-label">{{$t('page.sales_color1')}}</div>
        <div class="flex-1 d-s-c" style="height: 36px">
          <el-color-picker
            size="default"
            v-model="curItem.style.salesColor"
          ></el-color-picker>
          <el-input
            class="ml10"
            v-model="curItem.style.salesColor"
            :placeholder="$t('page.transparent')"
          />
          <el-button
            style="margin-left: 10px"
            @click.stop="$parent.onEditorResetColor(curItem.style, 'salesColor', '#999999')"


            type="primary"
            link
          > {{$t('page.reset')}} 

</el-button>
        </div>
      </div>
      <div class="form-item" v-if="curItem.style.productSales">
        <div class="form-label">{{$t('page.sales_background')}}</div>
        <div class="flex-1 d-s-c" style="height: 36px">
          <el-color-picker
            size="default"
            v-model="curItem.style.bgSales"
          ></el-color-picker>
          <el-input
            class="ml10"
            v-model="curItem.style.bgSales"
            :placeholder="$t('page.transparent')"
          />
          <el-button
            style="margin-left: 10px"
            @click.stop="$parent.onEditorResetColor(curItem.style, 'bgSales', '#999999')"


            type="primary"
            link
          > {{$t('page.reset')}} 

</el-button>
        </div>
      </div>
      <!--组件样式-->
      <div class="form-chink"></div>
      <div class="f16 gray3 form-subtitle">{{$t('page.component_style')}}</div>
      <!--上下边距-->
      <div class="form-item">
        <div class="form-label">{{$t('page.margin_top_label')}}</div>
        <el-slider
          v-model="curItem.style.paddingTop"
          size="small"
          show-input
          :show-input-controls="false"
          input-size="small"
        ></el-slider>
      </div>
      <!--上下边距-->
      <div class="form-item">
        <div class="form-label">{{$t('page.margin_bottom_label')}}</div>
        <el-slider
          v-model="curItem.style.paddingBottom"
          size="small"
          show-input
          :show-input-controls="false"
          input-size="small"
        ></el-slider>
      </div>
      <!--左右边距-->
      <div class="form-item">
        <div class="form-label">{{$t('page.margin_lr_label')}}</div>
        <el-slider
          v-model="curItem.style.paddingLeft"
          size="small"
          show-input
          :show-input-controls="false"
          input-size="small"
        ></el-slider>
      </div>
      <!--上圆角-->
      <div class="form-item">
        <div class="form-label">{{$t('page.border_radius_top_label')}}</div>
        <el-slider
          v-model="curItem.style.topRadio"
          size="small"
          show-input
          :show-input-controls="false"
          input-size="small"
        ></el-slider>
      </div>
      <!--下圆角-->
      <div class="form-item">
        <div class="form-label">{{$t('page.border_radius_bottom_label')}}</div>
        <el-slider
          v-model="curItem.style.bottomRadio"
          size="small"
          show-input
          :show-input-controls="false"
          input-size="small"
        ></el-slider>
      </div>
      <div class="form-item">
        <div class="form-label">{{$t('page.footer_bg_label')}}</div>
        <div class="flex-1 d-s-c" style="height: 36px">
          <el-color-picker
            size="default"
            v-model="curItem.style.bgcolor"
          ></el-color-picker>
          <el-input
            class="ml10"
            v-model="curItem.style.bgcolor"
            :placeholder="$t('page.transparent')"
          />
          <el-button
            style="margin-left: 10px"
            @click.stop="$parent.onEditorResetColor(curItem.style, 'bgcolor', '')"


            type="primary"
            link
            >{{$t('page.reset')}}</el-button
          >
        </div>
      </div>
      <div class="form-item">
        <div class="form-label">{{$t('page.component_bg_label')}}</div>
        <div class="flex-1 d-s-c" style="height: 36px">
          <el-color-picker
            size="default"
            v-model="curItem.style.background"
          ></el-color-picker>
          <el-input
            class="ml10"
            v-model="curItem.style.background"
            :placeholder="$t('page.transparent')"
          />
          <el-button
            style="margin-left: 10px"
            @click.stop="$parent.onEditorResetColor(curItem.style, 'background', '#ffffff')"


            type="primary"
            link
            >{{$t('page.reset')}}</el-button
          >
        </div>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      /*商品名称*/
      productName: false,
      /*正在砍价*/
      peoples: false,
      /*砍价底价*/
      floorPrice: false,
      /*商品价格*/
      originalPrice: false
    };
  },
  props: ["curItem", "selectedIndex", "opts"],
  created() {
    /*获取列表*/
    //this.getData();
  },
  methods: {
    /*内容是否选择*/
    check(checked, name) {
      let value = checked ? "1" : "0";
      this.curItem.style.show[name] = value;
    },
    ResetColor(name1, name2) {
      this.$parent.onEditorResetColor(this.curItem.style, name1, "");
      if (name2) {
        this.$parent.onEditorResetColor(this.curItem.style, name2, "");
      }
    }
  }
};
</script>

